/**
 * Licensed to Apereo under one or more contributor license
 * agreements. See the NOTICE file distributed with this work
 * for additional information regarding copyright ownership.
 * Apereo licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License.  You may obtain a
 * copy of the License at the following location:
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
.portlet {
  .portlet-content {
    zoom: 1;
    margin: 5px 0 0;
    overflow: visible;
  }

  .portlet-msg {
    padding: 0.25em 0.25em 0.25em 2.25em;
  }

  .portlet-selection {
    border: 1px solid @grayscale4;

    .titlebar {
      background-color: #f8f8f8;
      padding: 8px 8px 6px;
      border-bottom: 2px solid @grayscale4;
      margin-bottom: 0;
      position: relative;
    }

    .title {
      padding-top: 0.1em;

      &.selections {
        background: transparent;
        padding-left: 0;
      }
    }

    .content {
      padding: 0;
    }

    .selection-basket {
      padding: 8px;
      font-size: 120%;

      a {
        display: block;
        padding: 1px 0 1px 20px;
        color: #248222;
        text-decoration: none;
        background: transparent
          url("/ResourceServingWebapp/rs/famfamfam/silk/1.3/tick.png") 0 50%
          no-repeat;

        &:hover,
        &:focus {
          color: #9f0000;
          background: #ffc
            url("/ResourceServingWebapp/rs/famfamfam/silk/1.3/delete.png") 0 50%
            no-repeat;
        }
      }

      ul {
        padding: 0;
        margin: 0;
        list-style: none;
        height: 200px;
        overflow: auto;
      }

      li {
        padding: 0;
        margin: 0;
        list-style: none;
      }
    }
  }

  .titlebar {
    position: relative;
    margin-bottom: 1.5em;

    ul {
      margin: 0;
      padding: 0;
      overflow: hidden;
      zoom: 1;

      li {
        list-style-type: none;
        float: left;
        display: inline;
        padding: 0 5px;
      }
    }

    .breadcrumb-link {
      margin-bottom: 1em;
      font-size: 80%;
      color: @grayscale4;

      .separator {
        font-size: 90%;

        a {
          color: #bbb !important;
          font-weight: normal;
          text-decoration: none !important;

          &:hover,
          &:focus {
            color: #999 !important;
            text-decoration: underline !important;
          }
        }
      }

      .title {
        color: @grayscale4;
        font-size: 77%;
        display: inline;
      }

      .breadcrumbs {
        color: @grayscale4;
        font-size: 77%;
        display: inline;

        a {
          text-decoration: none;
        }

        .last {
          text-decoration: none;
          color: #aaa;
          cursor: default;
        }
      }
    }
  }

  .entity-browser {
    position: relative;
    margin-right: 24px;

    .titlebar {
      background-color: #f8f8f8;
      border: 1px solid @grayscale4;
      padding: 8px 8px 6px;
      margin-bottom: 0;
      position: relative;

      &:hover,
      &:focus {
        background-color: #ffc;
        cursor: pointer;
      }

      h4 {
        display: inline;
      }

      .title {
        font-size: 120%;
      }

      .select {
        background: transparent
          url("/ResourceServingWebapp/rs/famfamfam/silk/1.3/add.png") 0 50%
          no-repeat;

        span {
          visibility: hidden;
        }
      }
    }

    .content {
      padding: 8px 8px 12px;
      border: 1px solid @grayscale4;

      .title {
        padding-top: 0.1em;

        span {
          font-size: larger;
          padding-right: 1.2em;
        }
      }
    }

    .selected {
      background-color: #d1f0e0;

      &:hover,
      &:focus {
        background-color: #c8f0dd;
      }

      .title {
        color: #248222;
      }

      .select {
        background-image: url("/ResourceServingWebapp/rs/famfamfam/silk/1.3/delete.png");
        cursor: pointer;
      }
    }

    .group {
      .member-list {
        a {
          background-image: url("/ResourceServingWebapp/rs/famfamfam/silk/1.3/folder.png");
        }
      }
    }

    .person {
      .member-list {
        span {
          background-image: url("/ResourceServingWebapp/rs/famfamfam/silk/1.3/vcard.png");
        }
      }
    }

    .category {
      .member-list {
        a {
          background-image: url("/ResourceServingWebapp/rs/famfamfam/silk/1.3/tag_orange.png");
        }
      }
    }

    .member-list {
      margin-left: 0.5em;
      padding: 0;
      list-style: none;

      li {
        padding: 0;
        margin: 0;
        list-style: none;
      }

      a {
        background: no-repeat 0 50%;
        display: block;
        padding: 1px 0 1px 20px;

        &:hover,
        &:focus {
          background-color: #ffc;
          color: #369;
        }
      }

      span {
        background: no-repeat 0 50%;
        padding: 1px 0 1px 20px;
      }
    }
  }

  .portlet-search {
    position: absolute;
    top: 15px;
    right: 1px;

    form {
      margin-left: 20px;
    }
  }

  .search-dropdown {
    background-color: @white;
    box-shadow: 0 0 5px 0 @grayscale6;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #aaa;
    margin-left: 20px;
    padding: 0;
    min-width: 200px;
    min-height: 100px;
    z-index: +1;

    .search-close {
      background-color: #f8f8f8;
      padding: 5px 7px;
      text-align: right;
      border-bottom: 1px solid @grayscale4;

      a {
        font-size: 77%;
      }
    }

    .search-list {
      max-height: 250px;
      overflow: auto;
      margin: 0;
      list-style: none;
      display: block;
      float: none;
      padding: 2px 5px;

      li {
        margin: 0;
        list-style: none;
        display: block;
        float: none;
        padding: 2px 5px;

        &:hover,
        &:focus {
          background-color: #ffc;
        }
      }

      a {
        display: block;
        padding: 0 0 0 20px;
        background: url("/ResourceServingWebapp/rs/famfamfam/silk/1.3/add.png")
          0% 50% no-repeat;
        text-decoration: none;

        &:hover,
        &:focus {
          color: @black;
        }
      }

      span {
        margin-left: 15px;
      }

      .selected {
        background-color: #d1f0e0;

        &:hover,
        &:focus {
          background-color: #c8f0dd;
        }

        a {
          color: #248222;
          background-image: url("/ResourceServingWebapp/rs/famfamfam/silk/1.3/delete.png");
          font-weight: bold;
        }
      }
    }

    .search-loader {
      background: #efefef url("../images/loading.gif") 50% 50% no-repeat;
      position: absolute;
      inset: 0;

      span {
        visibility: hidden;
      }
    }

    .portlet-msg {
      &.info {
        display: none;
        margin: 5px 7px;
      }
    }
  }

  .breadcrumb-link {
    padding: 0;
  }

  .buttons {
    margin: 10px 0;
    padding-right: 8px;
    border-top: none;
    text-align: right;
  }

  &.search-portlet {
    .hidden {
      display: none;
    }
  }
}
